<template>
  <el-form label-width="100" :model="Model" :rules="rules">
    <el-form-item label="原始密码" prop="oldPwd">
      <el-input v-model="Model.oldPwd"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newPwd">
      <el-input type="password" show-password v-model="Model.newPwd"></el-input>
    </el-form-item>
    <el-form-item label="新密码确认" prop="newpwdConfirm">
      <el-input type="password" v-model="Model.newpwdConfirm" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="pwdChange" type="primary">确认</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { UserApi } from '@/api'

const Model = ref<HttpPayload.Pwd>({
  oldPwd: '',
  newPwd: '',
  newpwdConfirm: '',
})

const pwdChange = async () => {
  try {
    const i = await UserApi.pwdchange(Model.value)
    console.log(i)
  } catch (e) {/**/ }
}
const rules = {
  oldPwd: [
    { required: true, message: "原密码不能为空", trigger: "blur" },
    { min: 3, max: 20, message: "长度为3-20", trigger: "blur" }
  ],
  newPwd: [
    { required: true, message: '用户密码不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: "长度为3-20", trigger: "blur" }
  ],
  newpwdConfirm: [
    { require: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (type: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 20)
          callback(new Error('密码长度为3-20'))
        else if (value !== Model.value.newPwd)
          callback(new Error('两次输入的密码不一致'))
        else
          callback();
      },
      trigger: "blur"
    }
  ]
}

</script>
<style scoped ang="stylus">

</style>
